import "./backToTop.css";
import "../../assets/icons/iconfont.css";

import Scroll from "../../utils/scroll";

const TRANSITION_CLASSNAME = "backtotop-hidden";

class BackToTop {
  constructor(
    changingEl,
    critical_point,
    scollContainer,
    eventEl = scollContainer
  ) {
    this.changingEl = changingEl;
    this.critical_point = critical_point;
    this.scollContainer = scollContainer;
    this.eventEl = eventEl;
    new Scroll(
      {
        critical_point,
        change: () => {
          this.show();
        },
        reset: () => {
          this.hide();
        },
      },
      scollContainer,
      eventEl
    );

    this.bindEvent();
  }

  bindEvent() {
    this.changingEl.addEventListener(
      "click",
      () => {
        this.scrollTo();
      },
      false
    );
  }

  show() {
    this.changingEl.classList.remove(TRANSITION_CLASSNAME);
  }
  hide() {
    this.changingEl.classList.add(TRANSITION_CLASSNAME);
  }
  //滚动到顶部
  scrollTo(top = 0, left = 0) {
    this.scollContainer.scrollTo({
      top,
      left,
      behavior: "smooth",
    });
  }
}

export default BackToTop;
